<template>
  <div class="goods-detail">
    <div class="goods-content">
      <div class="supplier">
        <span class="title">企业名称</span>
        <span class="supplier_name">{{ goodsData.info.supplierName }}</span>
      </div>

      <div class="goods_info">
        <p class="title">基本信息</p>
        <div class="info">
          <div class="item">
            <span class="label">器械类别</span>
            <p>{{ goodsData.info.apparatusCategory?.apparatusCategoryName }}</p>
          </div>
          <div class="item">
            <span class="label">商品主图</span>
            <el-image v-for="(img, index) in goodsData.info.goodsImg?.split(',')" :key="index" class="goods_img" :src="img" :preview-src-list="[img]"> </el-image>
          </div>
          <div class="item">
            <span class="label">商品通用名</span>
            <p>{{ goodsData.info.goodsName }}</p>
          </div>
          <div class="item">
            <span class="label">商品商用名</span>
            <p>{{ goodsData.info.goodsSubtitle }}</p>
          </div>
          <div class="item">
            <span class="label">商品类目</span>
            <p>{{ consts.GoodsType[goodsData.info.goodsType] }}</p>
          </div>
          <div class="item">
            <span class="label">商品分类</span>
            <p>{{ goodsData.info.goodsCatNameFirst + ' / ' + goodsData.info.goodsCatNameSecond + ' / ' + goodsData.info.goodsCatNameThird }}</p>
          </div>
          <div class="item">
            <span class="label">商品属性</span>
            <div class="tags">
              <template v-for="(tag) in goodsData.info.goodsExpandparamValueList" >
                <div class="tag-info">
                  <span class="tag-label">{{ tag.expandparamName }}</span>
                  <span class="tag-name">{{ tag.expandparamValueName }}</span>
                </div>
              </template>
            </div>
          </div>

          <!--          <div class="item">-->
          <!--            <span class="label">品牌</span>-->
          <!--            <p>{{ goodsData.info.brand }}</p>-->
          <!--          </div>-->

          <div class="items">
            <div class="_left">
              <div>
                <span class="label">成本价</span>
                <p>{{ goodsData.info.goodsCostPrice }}</p>
              </div>
              <div>
                <span class="label">库存</span>
                <p>{{ goodsData.info.stock }}</p>
              </div>
            </div>
            <div class="_right">
              <div>
                <span class="label">销售价</span>
                <p>{{ goodsData.info.goodsSalesPrice }}</p>
              </div>
              <div>
                <span class="label">起定量</span>
                <p>{{ goodsData.info.minimumQuantity }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="goods_introduce">
        <p class="title">产品介绍</p>
        <div class="info">
          <div class="item">
            <span class="label">商品名称</span>
            <p>{{ goodsData.goodsIntro.productName }}</p>
          </div>
          <div class="items">
            <div class="_left">
              <div>
                <span class="label">销售单位</span>
                <p>{{ goodsData.goodsIntro.packingUnit }}</p>
              </div>
              <div>
                <span class="label">生产企业</span>
                <p>{{ goodsData.goodsIntro.productionEnterprise }}</p>
              </div>
              <div>
                <span class="label">注册证号</span>
                <p>{{ goodsData.goodsIntro.registrationNumber }}</p>
              </div>
              <div>
                <span class="label">适用范围</span>
                <p>{{ goodsData.goodsIntro.applicationScope }}</p>
              </div>
            </div>

            <div class="_right">
              <div>
                <span class="label">注册人</span>
                <p>{{ goodsData.goodsIntro.registrant }}</p>
              </div>
              <div>
                <span class="label">有效期(月)</span>
                <p>{{ goodsData.goodsIntro.validityPeriod }}</p>
              </div>
              <div>
                <span class="label">禁忌症</span>
                <p>{{ goodsData.goodsIntro.contraindication }}</p>
              </div>
            </div>
          </div>
          <div class="item">
            <span class="label">产品组成</span>

            <div v-if="isImage" class="img" >
              <el-image style="width: 146px;height: 146px" :src="goodsData.goodsIntro.productFormation" :preview-src-list="[goodsData.goodsIntro.productFormation]"> </el-image>
            </div>
            <p v-else>{{ goodsData.goodsIntro.productFormation }}</p>
          </div>
          <div class="item">
            <span class="label">使用方法</span>
            <p>{{ goodsData.goodsIntro.methodApplication }}</p>
          </div>
        </div>
      </div>

      <div class="goods_license">
        <p class="title">证件信息</p>
        <div class="goods_content"  v-for="imgItem in goodsData.info.goodsQualificationList"
             :key="imgItem.goodsQualificationId">
          <p class="title">
            {{ consts.GoodsQualificationType?.find(e => e.qualificationType === imgItem.goodsQualificationType).title }}
          </p>
          <el-image class="img" v-for="item in imgItem.qualificationImg" :src="item.url"
                    :preview-src-list="[item.url]" style="margin: 10px 5px"></el-image>
          <p class="title" v-if="imgItem.effectiveDate">
            证件生效期: {{ imgItem.effectiveDate }} - {{ imgItem.expiredDate }}
          </p>
        </div>
      </div>

      <div class="goods_instructions" v-if="goodsData.instructions.length > 0">
        <p class="title">产品使用说明书</p>
        <ul class="detail_list">
          <li v-for="(img, index) in goodsData.instructions" :key="index">
            <el-image class="img" :src="img" :preview-src-list="[img]"> </el-image>
          </li>
        </ul>
      </div>

      <div class="goods_detail" v-if="goodsData.imageList.length > 0">
        <p class="title">商品详情</p>
        <ul class="detail_list">
          <li v-for="(img, index) in goodsData.imageList" :key="index">
            <el-image class="img" :src="img" :preview-src-list="[img]"> </el-image>
          </li>
        </ul>
      </div>

      <AuditRecord v-if="ori === 'goodsAudit'" :list="goodsData.info.operateList" :ori="ori" />
    </div>

    <div v-if="ori === 'goodsAudit'" class="audit_button">
      <Button label="驳回" @click="onRejectClick" />
      <Button type="primary" label="通过" @click="onPassClick" />
    </div>
  </div>

  <Reject v-model:visible="rejectVisible" @change="onRejectChange" />
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import consts from '@/consts'
import AuditRecord from '@/components/info/record.vue'
import Button from '@/components/button/button.vue'
import Reject from '@/components/reject/index.vue'

const route = useRoute()
const router = useRouter()
const ori = route.meta.ori || ''

const goodsId = route.params.id
const loading = ref(false)
const rejectVisible = ref(false)

const goodsData = reactive({
  info: {},
  goodsIntro: {},
  imageList: [],
  instructions: []
})

const isImage = computed(() => {
  let reg = /(\.jpg|\.jpeg|\.png)$/i
  return reg.test(goodsData.goodsIntro.productFormation)
})

const audit = async (operateType, goodsId, remark) => {
  let { err } = await api.post(`/medinstrument/boss/goods/auditGoods?goodsId=${goodsId}&operateType=${operateType}&remark=${remark}`)
  if (err) {
    ElMessage.error(err)
  } else {
    router.push({ path: '/goods/audit' })
    operateType === 'PASS' ? ElMessage.success('商品审核通过') : ElMessage.error('商品审核驳回')
  }
}

const loadData = async () => {
  loading.value = true
  let url = `/medinstrument/boss/goods/goodsDetail?goodsId=${goodsId}`
  if (ori === 'goodsAudit') {
    url = `/medinstrument/boss/goods/goodsDetailAudit?goodsId=${goodsId}`
  }
  let { data, err } = await api.get(url)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    goodsData.info = data
    goodsData.goodsIntro = data.goodsIntro
    goodsData.info.goodsQualificationList.forEach(item => {
      if (item.qualificationImg) {
        item.qualificationImg = item.qualificationImg.includes(',') ? item.qualificationImg.split(',').map((e) => ({
          url: e,
          old: true
        })) : [item.qualificationImg].map((e) => ({
          url: e,
          old: true
        }))
      }
    })

    if (data.goodsDetail !== '') {
      goodsData.imageList = JSON.parse(data.goodsDetail.split(','))
    }
    goodsData.instructions = JSON.parse(data.instructions.split(','))
  }
}

const onRejectClick = () => {
  rejectVisible.value = true
}

const onRejectChange = (val) => {
  audit('REJECT', goodsId, val)
}

const onPassClick = () => {
  ElMessageBox.confirm('是否确认通过审核', '系统', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    showClose: false,
    closeOnClickModal: false,
    closeOnPressEscape: false
  })
    .then(() => {
      audit('PASS', goodsId, '')
    })
    .catch(() => {})
}

onMounted(() => {
  loadData()
})
</script>
<style scoped lang="scss">
.goods-detail {
  .goods-content {
    margin: 0 15px 0 10px;

    .goods_info,
    .supplier,
    .goods_introduce,
    .goods_detail,
    .goods_license,
    .goods_instructions {
      padding: 20px 0 20px 20px;
      background-color: #fff;
      margin-top: 10px;

      .title {
        font-weight: 500;
        font-size: 16px;
        line-height: 20px;
      }
    }

    .goods_content {
      border: 1px solid #ccc;
      margin-top: 10px;
      padding: 10px 5px;
    }

    .supplier {
      .supplier_name {
        color: var(--color-text);
        margin-left: 50px;
      }
    }

    .goods_info,
    .goods_introduce {
      .info {
        .item,
        .items {
          display: flex;
        }

        .item,
        .items {
          .label {
            display: inline-block;
            padding: 12px 0;
            line-height: 16px;
            margin-right: 24px;
            min-width: 72px;
          }

          p {
            min-height: 40px;
            line-height: 16px;
            padding: 10px 0 10px 15px;
            border: 1px solid var(--border-color);
            background-color: #f5f7fa;
            border-radius: 4px;
            box-sizing: border-box;
          }
        }

        .item {
          margin-top: 20px;
          align-items: center;
          color: var(--color-text);

          p {
            padding: 10px;
            width: 750px;
            min-height: 40px;
            line-height: 18px;
          }

          .tags {
            display: flex;
            flex-direction: column;

            .tag-info:last-child {
              margin-bottom: 0;
            }

            .tag-info {
              display: flex;
              align-items: center;
              margin-bottom: 12px;

              .tag-label {
                position: relative;
                width: 36px;
                color: var(--span-title-text);
                font-weight: 500;
                padding-right: 8px;
              }

              .tag-label::after {
                content: '';
                width: 0;
                height: 0;
                position: absolute;
                right: -12px;
                top: 5px;
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
                border-left: 5px solid #919398;
              }

              .tag-name {
                padding: 10px;
                border: 1px solid var(--input-border-color);
                background: var(--main-background);
                border-radius: 4px;
                margin-left: 35px;
                margin-right: 10px;
              }
            }
          }
        }

        .items {
          ._left,
          ._right {
            div {
              display: flex;
              align-items: center;
              margin-top: 20px;

              p {
                width: 309px;
              }
            }
          }

          ._right {
            margin-left: 40px;
          }
        }
      }
    }

    .goods_info {
      .goods_img {
        width: 146px;
        height: 146px;
        margin-right: 10px;
      }
    }

    .goods_license {
      .title {
        line-height: 20px;
        font-weight: 500;
        font-size: 16px;
      }

      .detail_list {
        display: flex;
        padding: 20px 0 0 110px;

        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          color: var(--color-text);

          .img {
            width: 100px;
            height: 100px;
            margin-bottom: 10px;
          }
        }
      }
    }
    .goods_introduce,
    .goods_detail,
    .goods_license,
    .goods_instructions {
      .detail_list {
        padding: 20px 0 0 90px;
        display: flex;

        li {
          margin-right: 12px;
        }
      }

      .img {
        width: 146px;
        height: 146px;
      }
    }
  }
}
</style>
